

float sdCircle( vec2 p, float r ) {
    // length 依然是求 (0, 0) 到 p 的距离
    return length( p ) - r;
}

float sdBox(  vec2 p, vec2 b ) {
    vec2 d = abs(p) - b;
    return length( max( d, 0.0 ) ) + min( max( d.x, d.y ), 0.0 );
}

/*
    两种 d 的求法都能画出圆角矩形 展开之后如下
    方式1: length(max(d,0)) + min(max(d.x,d.y),0) - radius
    方式2: length(max(d+radius,0)) + min(max((d+radius).x,(d+radius).y),0)
*/

float sdBoxRadius(  vec2 p, vec2 b, float radius ) {
    vec2 d = abs(p) - b + radius;
    // vec2 d = abs(p) - b;
    return length( max( d, 0.0 ) ) + min( max( d.x, d.y ), 0.0 ) - radius;
}

void main() {
    // 这一行改变了 当前像素的坐标范围 [ -1, 1 ];
    vec2 uv = ( gl_FragCoord.xy * 2.0 - iResolution.xy ) / iResolution.y;

    vec3 line_color = vec3( 1.0, 0.0, 0.0 );
    vec3 bg_color = vec3( 0.0, 0.0, 1.0 );
    float percent = 0.0;

    // sdCircle 返回的是当前点到圆心的距离减去半径 实现了有向距离场 在圆内部的percent < 0; 在圆上的为0; 在圆外为>0; 
    // percent = sdCircle( uv, 0.2 );

    // 绘制正方形
    percent = sdBox( uv, vec2(0.5, 0.3) );

    // 绘制圆角矩形
    percent = sdBoxRadius( uv, vec2( 0.5, 0.233 ), 0.08 );

    // 绘制圆角矩形
    // percent = sdBoxRadius( uv, vec2(0.3), 0.04 );
    
    // bg_color是灰色 line_color是黄色  m3ix 当 percent < 0 时 返回bg_color 当percent > 1 时返回line_color
    // 圆半径 r = 0.2; 
    // 然后 在圆内的像素点 percent<0; 所以圆内颜色为bg_color; 
    // 当 像素点在圆外 percent>0; percent 在范围 [0.2, 1] 内; 然后mix函数对两种颜色线性插值, 所以出现混合边缘
    // bg_color = mix( bg_color, line_color, percent );

    // 注意像素点在圆上时 sdCircle返回的是0; 所以此处调用 smoothstep 并且限制范围在 (0.0, 0.01); 就是用于处理圆的边缘
    // 0~0.01 就是圆的边界 使用smoothstep处理锯齿
    bg_color = mix( bg_color, line_color, 1.0 - smoothstep( 0.0, 0.01, percent ) );
    gl_FragColor = vec4( bg_color, 1.0 );
}